<template>

<div>

 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
<el-footer>修改用户昵称和头像</el-footer>

  <el-form-item label="用户id" prop="id">
    <el-input v-model.number="ruleForm.id"></el-input>
  </el-form-item>

  <el-form-item label="新昵称">
    <el-input  v-model="ruleForm.name" autocomplete="off"></el-input>
  </el-form-item>

<el-form-item label="上传头像" >
    <el-input type="file" v-model="ruleForm.fname" autocomplete="off"></el-input>
  </el-form-item> 
<!-- 
    <el-upload
    action="http://localhost:80/user/updateUserInfo"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog> --> 


  <el-form-item>
    <el-button type="primary" @click="updateUserInfo('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>


 




 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-footer>用户密码修改</el-footer>
  <el-form-item label="新密码" prop="password">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
  </el-form-item>

  <el-form-item label="确认密码" prop="checkpassword">
    <el-input type="password" v-model="ruleForm.checkPassward" autocomplete="off"></el-input>
  </el-form-item>

  <el-form-item label="用户id" prop="id">
    <el-input v-model.number="ruleForm.id"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="updatePassword('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
 
 </div>
</template>

<script>
export default {
    data() {
                                      
      return {
           dialogImageUrl: '',
        dialogVisible: false,

        ruleForm: {
          password: '',
          checkpassword: '',
          id: '',
          name:'',
          fname:'',

        },
       
      };
    },
    methods: {

    //修改密码
    updatePassword(){
      return this.axios
        .get("http://localhost:80/user/updatePassword",{
          params:{
            password:this.ruleForm.password,
            id:this.ruleForm.id,
          }
        })
        .then((result) => {
             this.$message.success("修改成功!");
        }).catch( (error)=>{
           this.$message.error("修改失败！");
        });
    },


  //修改头像和昵称
    updateUserInfo(){
      return this.axios
        .post("http://localhost:80/user/updateUserInfo",{
          params:{
            name:this.ruleForm.name,
            id:this.ruleForm.id,
            fname:this.ruleForm.fname
          }
        })
        .then((result) => {
             this.$message.success("修改成功!");
        }).catch( (error)=>{
           this.$message.error("修改失败！");
        });
    },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

       
    },
    //     handleRemove(file, fileList) {
    //     console.log(file, fileList);
    //   },
    //   handlePictureCardPreview(file) {
    //     this.dialogImageUrl = file.url;
    //     this.dialogVisible = true;
    //   }

  }
</script>

